<template>
  <div class="Navbar">
    <ul>
      <li
        @click="toTab(item)"
        v-for="(item, index) in tabList"
        :key="index"
        :class="{ active: msg == item.active }"
      >
        <img :src="item.src" alt="" />
        <p>{{ item.title }}</p>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "TabBar",
  data() {
    return {
      tabList: [
        {
          src: "../../public/",
          title: "前期管理",
          pathName: "/",
          active: "/shouye",
        },
        {
          src: "/shouyeImage/计划审批icon.png",
          title: "计划审批",
          pathName: "Jihua",
          active: "/jihua",
        },
        {
          src: "/shouyeImage/验收审计icon.png",
          title: "验收审计",
          pathName: "Yanshou",
          active: "/yanshou",
        },
        {
          src: "/shouyeImage/智慧监管icon.png",
          title: "智慧监管",
          pathName: "Zhihui",
          active: "/zhihui",
        },
        {
          src: "/shouyeImage/大数据库icon.png",
          title: "大数据库",
          pathName: "Dashuju",
          active: "/dashuju",
        },
      ],
    };
  },
  props: {
    msg: String,
  },
  methods: {
    toTab(item) {
      this.$router.push({
        path: item.pathName,
      });
    },
  },
};
</script>
<style lang="less" scoped>
.Navbar {
  width: 100%;
  height: 100%;
  ul {
    width: 100%;
    height: 100%;
    
    li {

      width: 90px;
      height: 90px;
      background-color: rgb(18, 110, 138);
      text-align: center;
      font-size: 12px;
      color: white;
      border-radius: 10px;
      margin-bottom: 35px;
      box-sizing: border-box;
      padding-top: 20px;
      img {
        width: 35px;
        height: 37px;
      }
    }
  }
  .active {
    background-color: rgb(188,123,16);
  }
}
</style>